<template>
  <!--面包屑-->
    <el-row>
        <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/">主页</el-breadcrumb-item>
                <el-breadcrumb-item to="/wisdomeat">智慧食堂</el-breadcrumb-item>
                <el-breadcrumb-item>学生管理</el-breadcrumb-item>
                <el-breadcrumb-item>点单管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </el-row>
  <!--    搜索区-->
    <el-row>
        <el-col :span="24">
            <el-form label-width="90px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="菜品名称">
                            <el-input v-model="query.dName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="商家名称">
                            <el-input v-model="query.bName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="菜品类型">
                            <el-select v-model="query.dType.id">
                                <el-option v-for="dt in dishesTypeList" :label="dt.dtName" :value="dt.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="success" style="width: 100px;" @click="btnQueryClick">
                                搜索
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-col>
    </el-row>
  <!--    点餐栏-->
    <div class="card" style="margin-bottom: 5px">
        <div v-if="sNumber">
            <div style="display: flex;align-items: center">
                <div style="flex: 1;">
                    <span style="margin-right: 10px">顾客：{{sNumber}} 开始点餐</span>
                    <el-button type="primary" plain @click="this.collection.show=true">已点餐品({{ total }})</el-button>
                </div>
            </div>
        </div>
        <div style="color:#666" v-else>
            您还未选登录，请先<a href="/login">登录</a>再点餐
        </div>
    </div>
  <!--    轮播图-->
    <div class="flow-box">
        <span class="demonstration">今日推荐</span>
        <el-carousel height="300px">
            <el-carousel-item v-for="item in Carousel_image" :key="item">
                <img :src="item.url" alt="图片" style="width: 1280px;height: 300px"/>
            </el-carousel-item>
        </el-carousel>
    </div>
  <!--  菜品列表-->
    <div class="foodList">
        <span class="demonstration" style="margin-left: 670px">全部菜品</span>
        <el-row :gutter="10">
            <el-col :span="6" v-for="item in dishesList" :key="item.id">
                <div class="card">
                    <img :src="item.dphoto" alt="" style="width: 100%;height: 280px">
                    <div style="margin: 5px;color: #000;font-size: 18px;display: flex;align-items: center">
                        <div style="flex: 1">{{ item.dname }}</div>
                        <div style="color:red;font-weight: bold">￥{{ item.dprice }}</div>
                    </div>
                    <div style="margin: 5px;color: #666;" class="line1">重量：{{ item.dweight }}</div>
                    <div style="margin: 10px 0;text-align: right">
                        <span style="margin-right: 55px;color: deepskyblue;"
                              @click="btnCheckClick(item.dnumber,item.num)">查看详情</span>
                        <el-input-number :min="1" :max="item.dcount" v-model="item.num" style="margin-right: 5px"/>
                        <el-button type="primary" @click="btnAddOrderClick(item)">点餐</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
  <!--    餐品详情弹窗-->
    <el-dialog v-model="info.show">
        <template #header>
            <span style="font-size: 20px;font-weight: bold">菜品详情</span>
        </template>
        <el-col :span="24">
            <el-row :gutter="10">
                <el-col :span="12">
                    <div>
                        <img :src="dishesDetail.dphoto" alt="" style="width: 350px;height: 350px"/>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="dialog-style">菜品名称：{{ dishesDetail.dname }}</div>
                    <div class="dialog-style">菜品价格：￥{{ dishesDetail.dprice }}</div>
                    <div class="dialog-style">菜品数量：
                        <el-input-number :min="1" v-model="dishesDetail.num"/>
                    </div>
                    <div class="dialog-style">菜品重量：{{ dishesDetail.dweight }}</div>
                    <div class="dialog-style">菜品类型：{{ dishesDetail.dtName }}</div>
                    <div class="dialog-style">菜品商家：{{ dishesDetail.bname }}</div>
                    <div class="dialog-style">
                        <el-button type="warning" @click="this.info.show=false">返回</el-button>
                        <el-button type="primary" @click="btnAddOrderClick(dishesDetail)">点餐</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-col>
    </el-dialog>
  <!--    购物车弹窗-->
    <el-dialog v-model="collection.show" title="已点餐品">
        <el-table :data="orderList">
            <el-table-column label="餐品图片" prop="dphoto">
                <template #default="scope">
                    <el-image style="width: 50px;height: 50px" :src="scope.row.dphoto"
                              :preview-src-list="scope.row.dphoto" preview-teleported/>
                </template>
            </el-table-column>
            <el-table-column label="菜品名称" prop="dname"/>
            <el-table-column label="菜品数量" prop="num"/>
            <el-table-column label="菜品价格" prop="dprice"/>
        </el-table>
        <template #footer>
            <div>
                <span style="margin-right: 10px;color: red;font-weight: bold">总计￥{{orderTotal}}元</span>
                <el-button type="warning" @click="this.collection.show=false">返回</el-button>
                <el-button type="primary" @click="btnSaveOrderClick">下单</el-button>
            </div>
        </template>
    </el-dialog>
<!--选择付款方式-->
    <el-dialog title="付款方式" v-model="payment.show">
            <el-row :gutter="10">
            <el-col :span="6" v-for="item in paymentList" :key="item.id">
                <div class="card">
                    <img :src="item.pphoto" alt="" style="width: 120px;height: 120px;margin-left: 20px">
                    <div style="margin: 5px;color: #000;font-size: 18px;display: flex;align-items: center">
                        <div>
                            <el-radio-group v-model="payment.radio">
                                <el-radio :value="item.id">{{ item.pname }}</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                </div>
            </el-col>
            </el-row>
            <div style="margin-top: 10px;margin-left: 650px">
                <el-button @click="btnPayClick" type="primary">去付款</el-button>
            </div>
    </el-dialog>

</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
    name: "Canteen",
    data() {
        return {
            sNumber:'',//学生编号
            dishesList: [], //菜品列表
            dishesTypeList: [], //菜品类型列表
            dishesDetail: {}, //详细信息列表
            orderList: [], //购物车列表
            paymentList:[], //支付方式列表
            detailId: '', //菜品ID
            num: 1, //购买数量
            total: 0, //购物车总数
            orderTotal:0.00, //订单总价
            //查询
            query: {
                dName: '',
                bName: '',
                dType: {
                    id: -1
                }
            },
            //餐桌
            table: {
                no: this.sNumber
            },
            //详细信息
            info: {
                show: false
            },
            payment:{
                show:false,
                radio:0
            },
            //购物车
            collection: {
                show: false
            },
            // 轮播图
            Carousel_image: [
                {
                    id: 1,
                    url: 'https://img.zcool.cn/community/01a5885964093ca8012193a364c829.jpg@2o.jpg'
                },
                {
                    id: 2,
                    url: 'https://img.zcool.cn/community/01447259640944a8012193a36d5ccf.jpg@1280w_1l_2o_100sh.jpg'
                },
                {
                    id: 3,
                    url: 'https://img.zcool.cn/community/01f5cd59640723a8012193a33a99d7.jpg@2o.jpg'
                },
                {
                    id: 4,
                    url: 'https://img.zcool.cn/community/019c9459640ac5a8012193a3b1c796.jpg@1280w_1l_2o_100sh.jpg'
                },
                {
                    id: 5,
                    url: 'https://img.zcool.cn/community/01fac459640a94a8012193a3b21755.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100'
                },
                {
                    id: 6,
                    url: 'https://img.zcool.cn/community/0114ef59640ad8a8012193a3d7cec5.jpg@2o.jpg'
                },
                {
                    id: 7,
                    url: 'https://img.zcool.cn/community/01ecbe5964095ba8012193a3547f0b.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100'
                },
                {
                    id: 8,
                    url: 'https://img.zcool.cn/community/01a3165964094aa8012193a3188dfe.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100'
                }
            ]
        }
    },
    methods: {
        //获取数据
        initTable() {
            axios({
                url: 'http://localhost:8888/dishes/selectDishesOnSale',
                method: 'get',
            }).then((res) => {
                this.dishesList = res.data.data;
                this.dishesList.forEach(item => item.num = 1) //初始化num
                this.sNumber=sessionStorage.getItem('snumber')
                if(this.sNumber!=null){
                    ElMessage.success({
                        message:'欢迎登录智慧食堂，祝您用餐愉快',
                        duration:1000
                    });
                }else {
                    ElMessage.warning({
                        message:'请先登录再点餐',
                        duration:1000
                    });
                }
            })
        },
        //获取菜品类型
        initDishesType() {
            axios({
                url: 'http://localhost:8888/dishestype/getDishesTypeList',
                method: 'get',
            }).then((res) => {
                this.dishesTypeList = res.data.data;
                this.dishesTypeList.unshift({
                    id: -1,
                    dtName: '--全部类型--'
                })
            })
        },
        //通过菜品id获取菜品详细信息
        initDishesDetail() {
            axios({
                url: 'http://localhost:8888/dishes/selectDishesByDNumber',
                method: 'get',
                params: {dNumber: this.detailId}
            }).then((res) => {
                this.dishesDetail = res.data.data[0];
                this.dishesDetail.num = this.num
            })
        },
        //获取付款方式
        initPayment() {
            axios({
                url: 'http://localhost:8888/payment/getPaymentList',
                method: 'get',
            }).then((res) => {
                this.paymentList = res.data.data;
            })
        },
        //查看详细信息
        btnCheckClick(dnumber, num) {
            this.detailId = dnumber
            this.num = num;
            this.initDishesDetail();
            this.info.show = true;
        },
        //添加购物车
        btnAddOrderClick(foods) {
            if(this.sNumber!=null){
                let flag = this.orderList.find(item => item.id === foods.id) //找到菜单里面跟当前点餐同样的餐品
                if (flag) { //存在相同餐品，就更新餐品数量
                    flag.num += foods.num
                } else { //不存在就添加
                    let food = JSON.parse(JSON.stringify(foods));
                    this.orderList.push(food);
                }
                //对num字段累计求和
                this.total = this.orderList.map(item => item.num).reduce((acc, cur) => acc + cur, 0)
                //购物车所有餐品总价
                this.orderTotal=0;
                this.orderList.forEach(item =>{
                    //循环累加，单价*数量
                    this.orderTotal += item.dprice * item.num
                })
            }else {
                ElMessage.warning({
                    message:'请先登录再点餐',
                    duration:1000
                });
            }
        },
        //不定查询
        btnQueryClick(){
            axios({
                url: 'http://localhost:8888/dishes/selectOnSaleDishesByExample',
                method: 'get',
                params: {
                    dName: this.query.dName,
                    bName:this.query.bName,
                    dTypeId:this.query.dType.id
                }
            }).then((res) => {
                this.dishesList = res.data.data;
            })
        },
        //下单
        btnSaveOrderClick(){

            if(this.orderList.length===0){
                ElMessage.warning({
                    message:'请选择餐品',
                    duration:1000
                });
            }else {
                this.collection.show=false
                this.payment.show=true;
            }

        },
        btnPayClick(){
            if(this.payment.radio===0){
                ElMessage.warning({
                    message:'请选择支付方式',
                    duration:1000
                });
            }else {
                let content = '';
                this.orderList.forEach(item =>{
                    content += item.dname + '*' + item.num + ',';
                })
                content = content.substring(0,content.length-1)
                axios({
                    url:'http://localhost:8888/restaurantorders/insertROrder',
                    method:'post',
                    params:{
                        roContent:content,
                        roCount:this.total,
                        roPrice:this.orderTotal,
                        roPaymentId:this.payment.radio,
                        roStateId:1,
                        roSNumber:this.sNumber,
                        roBNumber:this.orderList[0].bnumber
                    }
                }).then((res)=>{
                    if(res.data.success){
                        ElMessage.success({
                            message:'下单成功',
                            duration:1000
                        });
                    }
                    this.payment.show=false;
                })
            }
        }
    },
    mounted() {
        this.initTable();
        this.initDishesType();
        this.initPayment();
    }
}
</script>

<style scoped>
.breadcrumb {
    padding: 10px;
}

.flow-box {
    margin-left: 100px;
    width: 1280px;
    height: 300px;
}

.demonstration {
    color: var(--el-text-color-secondary);
    margin-left: 570px;
    font-size: 30px;
}

.card {
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.foodList {
    margin-top: 70px;
}

.line1 {
    overflow: hidden; /* 超出容器的文本被裁剪*/
    white-space: nowrap; /* 确保文本在一行内显示*/
    text-overflow: ellipsis; /* 使用省略号表示文本超出*/
}

.dialog-style {
    margin: 20px;
    color: #000;
    font-size: 18px
}
</style>